<template>
  <div>
    <h1>商品分类</h1>
    <div class="coy-wryp">
      <!-- 左面导航 -->
      <ul>
        <li
          v-for="(item, index) in classArr"
          :key="index"
          @click="handClick(index)"
        >
          <div :class="{ active: activeClass == index }">{{ item }}</div>
        </li>
      </ul>
      <div class="coy-right">
        <!-- 右面具体商品类别 -->
        <div class="accessories" v-for="item,index in accs" :key="index">
          <div class="title">{{ item }}</div>
          <div class="ring">
            <div v-for="item in ringArr" :key="item.id">
              <img :src="item.img" alt="" />
              <p>{{ item.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      classArr: [
        "配饰",
        "女装",
        "美妆",
        "彩妆",
        "洗护",
        "运动",
        "箱包",
        "内衣",
        "百货",
        "家电",
        "家居",
        "成人",
        "数码",
        "护肤",
        "男装",
        "萌宠",
        "配饰",
        "男鞋",
      ],
      activeClass: 0,
      ringArr: [
        {
          img: "https://img10.360buyimg.com/n7/jfs/t1/163368/26/14278/452313/6059a141Eefc28f0f/3c8311fddb113f82.jpg",
          title: "耳饰",
        },
        {
          img: "https://img13.360buyimg.com/n7/jfs/t1/187446/36/19032/182058/611f5acbE2acff22b/edca618cf11e250d.jpg",
          title: "戒指",
        },
        {
          img: "	https://img14.360buyimg.com/n7/jfs/t1/190803/5/16765/175599/610b5fcfE4935f114/a04cd503e470cc62.jpg",
          title: "发饰",
        },
        {
          img: "	https://img14.360buyimg.com/n7/jfs/t1/185717/35/20066/135517/611f6213Ee87d97b6/a251c6438b706193.jpg",
          title: "项链",
        },
        {
          img: "https://img11.360buyimg.com/n7/jfs/t1/166536/34/18687/502414/60794989Ecc5775a9/4ada886bbeb9cff4.jpg",
          title: "胸针",
        },
        {
          img: "	https://img12.360buyimg.com/n7/jfs/t1/70845/29/11831/117983/5d916ac3E1cb0cf58/cbc52535faad69f3.jpg",
          title: "手串",
        },
        {
          img: "https://img12.360buyimg.com/n7/jfs/t1/40357/33/11757/133388/5d2d8525Ed5964b70/6978b32f2eed711c.jpg",
          title: "脚链",
        },
      ],
      accs:[ "饰品" , "夏日" , "手表" ]
    };
  },
  methods: {
    handClick(index) {
      this.activeClass = index;
    },
  },
};
</script>

<style lang="stylus" scoped>
h1 {
  width: 100%;
  height: 0.64rem;
  background-color: #c1ab96;
  padding-left: 0.15rem;
  padding-top: 0.25rem;
  font-size: 0.22rem;
  color: #fff;
}

.coy-wryp {
  width: 100%;
  display: flex;

  ul {
    width: 1rem;
    height 6.19rem
    overflow hidden
    overflow-y scroll 
    li {
      width: 100%;
      height: 0.76rem;
      background-color: #ffffff;
      position: relative;

      div {
        width: 0.7rem;
        height: 0.3rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -0.35rem;
        margin-top: -0.15rem;
        text-align: center;
        line-height: 0.3rem;
        font-size: 0.13rem;
        border-radius: 0.2rem;
        background-color: #fff;
        color: #000;
      }
    }
  }

  .coy-right {
    flex: 1;
    height: 6.19rem;
    background-color: #eae9e5;
    overflow hidden
    overflow-y scroll 
  }

  .active {
    background-color: #c1ab96;
    color: #fff;
  }

  .accessories {
    width: 100%;
    padding: 0 0.12rem;

    .title {
      margin-top: 0.25rem;
      margin-bottom: 0.15rem;
    }

    .ring {
      width: 2.5rem;
      height: 2.7rem;
      background-color: #fff;
      border-radius: 0.1rem;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content space-between
      padding 0.1rem 0.1rem
      >div {
        width: 32%;
        height: 0.9rem;
        img {
          width: 100%;
          height: 0.5rem;
        }

        p {
          height: 0.3rem;
          line-height: 0.3rem;
          text-align: center;
        }
      }
    }
  }
}
</style>